<template>
	<u-popup :show="show" :round="10" mode="bottom" closeable @close="close" @open="open">
		<view class="popup" v-if="updateInfoShow">
			<view class="popup_hd">
				<image
					src="@/static/images/logo.png"
					mode=""></image>
				<view class="title">慧农研学</view>
				<view class="title">申请</view>
			</view>
			<view class="popup_txt">
				获取您的昵称、头像
			</view>
			<view class="popup_main">
				<view class="item">
					<view class="label">头像</view>
					<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						<image class="avatar" :src="formData.headUrl" v-if="formData.headUrl"></image>
						<view class="input-placeholder" v-else>请上传头像</view>
					</button>
					<view class="iconfont icon-jiantou"></view>
				</view>
				<view class="item">
					<view class="label">昵称</view>
					<input type="nickname" class="weui-input" placeholder="请输入昵称" placeholder-class="input-placeholder"
						v-model="formData.realName" @change="changeName" />
				</view>
			</view>
			<view class="popup_bottom">
				<view class="btn agree" @click="handleUpdateUserInfo">允许</view>
				<view class="btn" @click="close">拒绝</view>
			</view>
		</view>
		<view class="login" v-else>
			<view class="login-title">
				浦江研学
			</view>
			<view class="login-subtitle">
				成为研学会员
			</view>
			<view class="login-subtitle">
				尊享报名特权与周边好物
			</view>
			<view class="login-btn">
				<u-button size="large" color="linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.5))" openType="getPhoneNumber" text="立即登录" @getphonenumber="getPhoneNum"></u-button>
				<!-- <u-button color="linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.5))" text="立即登录" size="large"
					@click="login"></u-button> -->
			</view>
		</view>
	</u-popup>
</template>

<script>
	import {
		apiURL
	} from '@/utils/contant.js';
	export default {
		props: {
			value: {
				type: Boolean,
				default: false,
			},
		},
		data() {
			return {
				show: !!this.value,
				updateInfoShow: false,
				formData: {
					realName: '',
					headUrl: '',
				}
			}
		},
		watch: {
			show(val) {
				this.$emit('input', val)
			},
		},
		methods: {
			async getUserInfo() {
				const res = await this.$api('/study/mobile/personal/center/info');
				this.formData.realName = res.data?.realName;
				this.formData.headUrl = res.data?.headUrl;
			},
			changeName(e) {
				this.formData.nickname = e.detail.value;
			},
			onChooseAvatar(e) {
				console.log(e)
				var that = this
				const {
					avatarUrl
				} = e.detail
				uni.uploadFile({
					url: apiURL + '/sys/oss/upload',
					filePath: avatarUrl,
					name: "file",
					header: {
						token: uni.getStorageSync('token'),
					},
					success: (uploadFileRes) => {
						console.log(uploadFileRes);
						const data = JSON.parse(uploadFileRes.data);
						if (data.code === 0) {
							that.formData.headUrl = data.data.src;
							uni.showToast({
								title: "上传成功",
								icon: "none",
								duration: 2000,
							});
						} else {
							uni.showToast({
								title: "上传失败",
								icon: "none",
								duration: 2000,
							});
						}
						that.$forceUpdate();
					},
				});
			},
			async getPhoneNum(e) {
				const res = await this.$api('/wechat/getPhoneNumber', 'get', {
					code: e.detail.code,
				});
				if(res.code === 0 && res.data) {
					this.login(res.data);
				}
			},
			login(mobile) {
				const that = this;
				uni.login({
					provider: 'weixin', //使用微信登录
					success: async function(loginRes) {
						console.log(loginRes);
						uni.showLoading();
						const res = await that.$api('/wechat/login', 'post', {
							code: loginRes.code,
							mobile
						});
						uni.hideLoading();
						if (res.code === 0) {
							uni.setStorageSync('token', res.data.token);
							
							await that.getUserInfo();
							if (!that.formData.realName) {
								that.updateInfoShow = true;
							} else {
								that.show = false;
								const currentPages = getCurrentPages();
								const currentPage = currentPages[currentPages.length - 1];
								uni.reLaunch({
									url: `/${currentPage.route}`,
								});
								uni.showToast({
									title: '登录成功',
								});
							}
						}
					}
				});

			},
			open(updateInfoShow) {
				this.show = true;
				this.updateInfoShow = updateInfoShow;
				if (updateInfoShow) {
					this.getUserInfo();
				}
				console.log('open');
			},
			async handleUpdateUserInfo() {
				if (!this.formData.headUrl) {
					uni.showToast({
						icon: 'none',
						title: '请选择头像'
					});
					return;
				}
				if (!this.formData.realName) {
					uni.showToast({
						icon: 'none',
						title: '请填写昵称'
					});
					return;
				}
				uni.showLoading();
				const res = await this.$api('/study/mobile/personal/center/update/info', 'post', {
					realName: this.formData.realName,
					headUrl: this.formData.headUrl,
				});
				uni.hideLoading();
				if(res.code === 0) {
					this.close();
				}
			},
			close() {
				const currentPages = getCurrentPages();
				const currentPage = currentPages[currentPages.length - 1];
				uni.reLaunch({
					url: `/${currentPage.route}`,
				});
				this.show = false;
			},
		},
	}
</script>

<style lang="scss" scoped>
	.login {
		padding: 30rpx;
	}

	.login-title {
		padding: 0rpx 0 60rpx;
		font-size: 36rpx;
		font-weight: bold;
	}

	.login-subtitle {
		padding: 10rpx 0;
	}

	.login-btn {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		margin-top: 120rpx;
	}

	.popup {
		background-color: #fff;
		padding: 40rpx;
		border-radius: 30rpx 30rpx 0 0;

		&_hd {
			display: flex;
			align-items: center;
			font-weight: bold;
			font-size: 32rpx;

			image {
				width: 60rpx;
				height: 60rpx;
				border-radius: 100%;
			}


			.title {
				margin-left: 10rpx;
			}

		}

		.popup_txt {
			font-size: 28rpx;
			font-weight: bold;
			padding: 40rpx 0 20rpx;
		}

		&_main {
			font-size: 28rpx;
			color: #444;

			.item {
				display: flex;
				align-items: center;
				border-bottom: 1px solid #eee;
				padding: 40rpx 0;

				.avatar-wrapper {
					margin-left: 16rpx;
				}

				image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 100%;
				}

				button {
					background: transparent;
					width: 100%;
					padding: 0;
					text-align: left;

					&::after {
						border: none;
					}
				}


				.label {
					width: 100rpx;
				}
			}

			::v-deep .input-placeholder {
				color: #ccc !important;
				font-size: 28rpx;
			}
		}

		&_bottom {
			padding: 40rpx 0 0;

			.btn {
				text-align: center;
				padding: 20rpx 0;
				border-radius: 10rpx;
				background-color: #fff;
				color: #4f6fcb;
				font-weight: bold;
				margin: 20rpx 0 0;
			}

			.agree {
				background-color: #dfeffe;
				color: #3d6bfe;
			}
		}
	}
</style>